<template>
  <div>
    <div class="conts">
      <div class="das">
        <div class="zhuan">
          <div class="tujian">
            <!-- 推荐 -->
            <ul class="biaoti">
              <li><span>你的歌单</span></li>
            </ul>
            <span style="margin-top: 10px; display: block"
              >根据您的喜爱所推荐的歌单</span
            >
          </div>
        </div>
        <gedan :gedan="gedan"></gedan>
        <div class="zhuan1">
          <div class="tujian">
            <!-- 推荐 -->
            <ul class="biaoti">
              <li><span>音乐伴你日落而归</span></li>
            </ul>
          </div>
          <gedan :gedan="gedan1"></gedan>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import API from "../http/API";
import gedan from "../components/home/gedan.vue";
export default {
  components: {
    gedan,
  },
  data() {
    return {
      gedan1: [],
      gedan: [],
    };
  },
  created() {
    this.$store.watch(
      (state) => state.denglo,
      (value) => {
        this.http();
      }
    );
    this.tjian();
    this.http();
  },
  mounted() {},
  methods: {
    http() {
      // console.log(localStorage.getItem("User"))
      if (localStorage.getItem("User") != null) {
        console.log("13213")
        this.$get(API.RECOMMEND_RESOURCE).then((data) => {
          this.gedan = data.recommend.splice(0,10);
        });
      } else {
        this.$get(API.PERSOBALIZED, {
          limit: 10,
        }).then((data) => {
          this.gedan = data.result;
        });
      }
    },
    tjian() {
      this.$get(API.PERSOBALIZED, {
      
      }).then((data) => {
        this.gedan1 = data.result;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.conts {
  .das {
    padding-top: 80px;
    max-width: 1200px;
    padding-bottom: 140px;
  }

  @media only screen and (min-width: 800px) {
    // background-color:green;

    .das {
      //  max-width: 70%;

      margin: 0 auto;
      min-width: 650px;
      // border: 1px solid #000;
    }
  }

  .tujian {
    margin-bottom: 20px;
    margin-top: 10px;
  }
}
.zhuan {
  // padding-top: 60px;
  height: 70px;
  width: 100%;
  //  border: 1px solid #000;
}
.tujian {
  margin-bottom: 20px;
  margin-top: 10px;
  .biaoti {
    display: flex;
    align-items: center;
    li {
      &:nth-child(1) {
        span {
          font-size: 20px;
          font-weight: 550;
        }
      }
      &:nth-child(2) {
        width: 20px;
        height: 20px;
        transform: rotate(180deg);
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>